<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能物联网平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            min-height: 100vh;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏样式 - 优化为明亮色调 */
        .sidebar {
            width: 280px;
            background: rgba(255, 255, 255, 0.95);
            color: #444;
            padding: 20px 0;
            transition: all 0.3s;
            position: relative;
            z-index: 10;
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.05);
        }

        .logo {
            text-align: center;
            padding: 15px 0 25px;
            font-size: 26px;
            font-weight: bold;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #2c3e50;
        }

        .logo i {
            color: #3498db;
            font-size: 28px;
        }

        .menu {
            margin-top: 15px;
            padding: 0 15px;
        }

        .menu-item {
            position: relative;
            overflow: hidden;
            margin-bottom: 5px;
            border-radius: 8px;
        }

        .menu-item > a {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            color: #444;
            text-decoration: none;
            transition: all 0.3s;
            position: relative;
            gap: 12px;
            cursor: pointer;
        }

        .menu-item > a .arrow {
            margin-left: auto;
            transition: transform 0.3s;
            font-size: 12px;
            opacity: 0.7;
            color: #7f8c8d;
        }

        .menu-item.active > a .arrow {
            transform: rotate(90deg);
        }

        .menu-item > a:hover {
            background-color: rgba(52, 152, 219, 0.1);
        }

        .menu-item.active > a {
            background: linear-gradient(90deg, rgba(41, 128, 185, 0.1), transparent);
            border-left: 4px solid #3498db;
        }

        .submenu {
            display: none;
            background-color: rgba(245, 247, 250, 0.9);
            padding: 5px 0;
            border-radius: 0 0 8px 8px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-top: none;
        }

        .menu-item.active .submenu {
            display: block;
        }

        .submenu a {
            display: block;
            padding: 13px 20px 13px 60px;
            color: #555;
            text-decoration: none;
            transition: all 0.3s;
            position: relative;
            font-size: 14px;
        }

        .submenu a:before {
            content: "";
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background: #3498db;
            border-radius: 50%;
            opacity: 0.7;
        }

        .submenu a:hover {
            background-color: rgba(52, 152, 219, 0.1);
            color: #2980b9;
            padding-left: 62px;
        }

        /* 主内容区样式 */
        .main-content {
            flex: 1;
            padding: 25px 35px;
            background-color: rgba(255, 255, 255, 0.85);
            overflow-y: auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 25px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
            position: sticky;
            top: 0;
            z-index: 5;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .header h2 {
            color: #2c3e50;
            font-weight: 600;
            font-size: 24px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-info img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #3498db;
            box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
        }

        .user-info span {
            font-weight: 500;
            color: #2c3e50;
        }

        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
            margin-bottom: 35px;
        }

        .logout-btn {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: white;
            border: none;
            padding: 13px;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 20px;
            width: calc(100% - 30px);
            margin-left: 15px;
            font-weight: 500;
            font-size: 15px;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(231, 76, 60, 0.15);
        }

        .logout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(231, 76, 60, 0.25);
        }

        .card {
            background: #ffffff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }

        .card:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            opacity: 0.7;
            transition: opacity 0.3s;
        }

        .card:hover {
            transform: translateY(-7px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
            border-color: rgba(52, 152, 219, 0.3);
            background: #ffffff;
        }

        .card:hover:after {
            opacity: 1;
        }

        .card h3 {
            margin-bottom: 15px;
            color: #2c3e50;
            font-size: 20px;
            font-weight: 600;
        }

        .card p {
            color: #7f8c8d;
            line-height: 1.6;
            font-size: 15px;
        }

        .card-icon {
            font-size: 46px;
            margin-bottom: 20px;
            color: #3498db;
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(52, 152, 219, 0.1);
            box-shadow: 0 0 15px rgba(52, 152, 219, 0.15);
        }

        /* 维护支持页面样式 */
        .support-container {
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
            padding: 30px;
            margin-top: 20px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            display: none; /* 默认隐藏 */
        }

        .support-header {
            text-align: center;
            margin-bottom: 35px;
        }

        .support-header h2 {
            color: #2c3e50;
            font-size: 32px;
            margin-bottom: 10px;
        }

        .support-header p {
            color: #7f8c8d;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
            font-size: 17px;
        }

        .support-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 35px;
        }

        .support-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 25px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
            transition: all 0.3s;
        }

        .support-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            border-color: rgba(52, 152, 219, 0.2);
        }

        .support-card h3 {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #2c3e50;
            margin-bottom: 18px;
            font-size: 20px;
        }

        .support-card h3 i {
            width: 40px;
            height: 40px;
            background: rgba(52, 152, 219, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: #3498db;
            box-shadow: 0 0 10px rgba(52, 152, 219, 0.1);
        }

        .faq-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 18px 0;
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 500;
            color: #2c3e50;
        }

        .faq-question i {
            transition: transform 0.3s;
            color: #3498db;
        }

        .faq-answer {
            padding-top: 12px;
            color: #7f8c8d;
            line-height: 1.7;
            display: none;
        }

        .faq-item.active .faq-answer {
            display: block;
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

        .contact-form {
            background: #f9fbfd;
            border-radius: 12px;
            padding: 30px;
            margin-top: 30px;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .form-group {
            margin-bottom: 22px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #2c3e50;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 14px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
            color: #333;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            outline: none;
        }

        .form-group textarea {
            min-height: 150px;
            resize: vertical;
        }

        .submit-btn {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            border: none;
            padding: 14px 28px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s;
            width: 100%;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
        }

        .system-status {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin-top: 35px;
        }

        .status-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            text-align: center;
            border-top: 4px solid;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .status-card.ok {
            border-top-color: #2ecc71;
        }

        .status-card.warning {
            border-top-color: #f39c12;
        }

        .status-card.error {
            border-top-color: #e74c3c;
        }

        .status-card i {
            font-size: 36px;
            margin-bottom: 15px;
        }

        .status-card.ok i {
            color: #2ecc71;
        }

        .status-card.warning i {
            color: #f39c12;
        }

        .status-card.error i {
            color: #e74c3c;
        }

        .status-card h4 {
            color: #2c3e50;
            margin-bottom: 8px;
        }

        .status-card p {
            color: #7f8c8d;
            font-size: 14px;
        }

        .log-item {
            padding: 10px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .log-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .log-time {
            color: #7f8c8d;
            font-size: 14px;
        }

        .log-status {
            font-weight: 500;
            font-size: 14px;
        }

        .log-status.ok {
            color: #2ecc71;
        }

        .log-status.warning {
            color: #f39c12;
        }

        .log-status.error {
            color: #e74c3c;
        }

        .log-message {
            color: #555;
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                height: auto;
            }

            .menu {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }

            .menu-item {
                width: 50%;
            }
        }

        @media (max-width: 768px) {
            .menu-item {
                width: 100%;
            }

            .main-content {
                padding: 15px;
            }

            .header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .dashboard {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边栏导航 -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-network-wired"></i>
                <span>IoT管理平台</span>
            </div>
            <div class="menu">
                <div class="menu-item">
                    <a href="#">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>实时监控</span>
                        <span class="arrow"><i class="fas fa-chevron-right"></i></span>
                    </a>
                    <div class="submenu">
                        <a href="/api/iot" onclick="navigateTo('iot')">设备状态</a>
                        <a href="/api/dashboard" onclick="navigateTo('dashboard')">数据可视化</a>
                    </div>
                </div>

                <div class="menu-item">
                    <a href="#">
                        <i class="fas fa-sliders-h"></i>
                        <span>设备控制</span>
                        <span class="arrow"><i class="fas fa-chevron-right"></i></span>
                    </a>
                    <div class="submenu">
                        <a href="/api/control/remote" onclick="navigateTo('control')">远程控制</a>
                        <a href="/api/control/rules" onclick="navigateTo('rules')">设置阈值</a>
                    </div>
                </div>

                <div class="menu-item">
                    <a href="/analyse" onclick="navigateTo('analyse')">
                        <i class="fas fa-chart-line"></i>
                        <span>数据分析</span>
                    </a>
                </div>

                <div class="menu-item">
                    <a href="/wh" onclick="showSupportPage()">
                        <i class="fas fa-tools"></i>
                        <span>维护支持</span>
                    </a>
                </div>

                <div class="menu-item">
                    <a href="/api/show_weather" onclick="navigateTo('weather')">
                        <i class="fas fa-cloud-sun"></i>
                        <span>每日天气</span>
                    </a>
                </div>

                <button id="logout-btn" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                </button>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <h2>控制面板</h2>
                <div class="user-info">
                    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="管理员头像">
                    <span>系统管理员</span>
                </div>
            </div>

            <!-- 原始控制面板内容 -->
            <div class="dashboard" id="dashboard-content">
                <div class="card" onclick="navigateTo('iot')">
                    <div class="card-icon"><i class="fas fa-chart-bar"></i></div>
                    <h3>实时监控</h3>
                    <p>查看设备实时状态和数据流</p>
                </div>

                <div class="card" onclick="navigateTo('route_control')">
                    <div class="card-icon"><i class="fas fa-cogs"></i></div>
                    <h3>设备控制</h3>
                    <p>远程控制和管理设备</p>
                </div>

                <div class="card" onclick="navigateTo('analyse')">
                    <div class="card-icon"><i class="fas fa-chart-line"></i></div>
                    <h3>数据分析</h3>
                    <p>查看历史数据和趋势分析</p>
                </div>

                <div class="card" onclick="showSupportPage()">
                    <div class="card-icon"><i class="fas fa-tools"></i></div>
                    <h3>维护支持</h3>
                    <p>系统维护和技术支持</p>
                </div>


                <div class="card" onclick="navigateTo('weather')">
                    <div class="card-icon"><i class="fas fa-cloud-sun"></i></div>
                    <h3>每日天气</h3>
                    <p>查看当地天气预报</p>
                </div>
            </div>

            <!-- 维护支持内容 -->
            <div class="support-container" id="support-content">
                <div class="support-header">
                    <h2><i class="fas fa-tools"></i> 技术支持与维护中心</h2>
                    <p>在这里您可以找到常见问题解答、联系技术支持团队、查看系统日志以及监控系统状态。我们的团队随时准备为您提供帮助。</p>
                </div>

                <div class="support-grid">
                    <div class="support-card">
                        <h3><i class="fas fa-question-circle"></i> 常见问题解答</h3>
                        <div class="faq-list">
                            <div class="faq-item">
                                <div class="faq-question">
                                    如何添加新设备到系统?
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                                <div class="faq-answer">
                                    进入"设备控制"菜单，点击"添加设备"按钮，输入设备ID和认证密钥，系统将自动搜索并连接设备。
                                </div>
                            </div>
                            <div class="faq-item">
                                <div class="faq-question">
                                    设备离线如何处理?
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                                <div class="faq-answer">
                                    首先检查设备的电源和网络连接，然后尝试在"实时监控"页面重新连接设备。如果问题持续，请联系技术支持。
                                </div>
                            </div>
                            <div class="faq-item">
                                <div class="faq-question">
                                    如何设置自动化规则?
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                                <div class="faq-answer">
                                    在"设备控制"菜单下选择"设置阈值"，您可以创建基于传感器数据的自动化响应规则。
                                </div>
                            </div>
                            <div class="faq-item">
                                <div class="faq-question">
                                    数据历史保存多久?
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                                <div class="faq-answer">
                                    系统默认保存90天的详细数据，之后会进行归档处理。您可以在"数据分析"页面导出历史数据。
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="support-card">
                        <h3><i class="fas fa-history"></i> 最近系统日志</h3>
                        <div class="log-list">
                            <div class="log-item">
                                <div class="log-header">
                                    <span class="log-time">2023-06-21 14:23:18</span>
                                    <span class="log-status ok">正常</span>
                                </div>
                                <div class="log-message">温度传感器更新阈值：上限28°C → 26°C</div>
                            </div>
                            <div class="log-item">
                                <div class="log-header">
                                    <span class="log-time">2023-06-21 13:45:02</span>
                                    <span class="log-status warning">警告</span>
                                </div>
                                <div class="log-message">会议室湿度超过阈值(65%)，当前值：68%</div>
                            </div>
                            <div class="log-item">
                                <div class="log-header">
                                    <span class="log-time">2023-06-21 10:12:37</span>
                                    <span class="log-status ok">正常</span>
                                </div>
                                <div class="log-message">系统备份完成，耗时12分34秒</div>
                            </div>
                            <div class="log-item">
                                <div class="log-header">
                                    <span class="log-time">2023-06-20 22:30:15</span>
                                    <span class="log-status">信息</span>
                                </div>
                                <div class="log-message">固件自动更新：网关设备 v2.3.5 → v2.4.1</div>
                            </div>
                            <div class="log-item">
                                <div class="log-header">
                                    <span class="log-time">2023-06-20 18:45:29</span>
                                    <span class="log-status error">错误</span>
                                </div>
                                <div class="log-message">设备#D204连接超时，自动重连中...</div>
                            </div>
                        </div>
                    </div>

                    <div class="support-card">
                        <h3><i class="fas fa-headset"></i> 联系技术支持</h3>
                        <div class="contact-info">
                            <p><i class="fas fa-phone-alt"></i> 支持热线: 400-888-9999</p>
                            <p><i class="fas fa-envelope"></i> 邮箱: support@iotplatform.com</p>
                            <p><i class="fas fa-clock"></i> 工作时间: 周一至周五 8:30-17:30</p>
                            <p><i class="fas fa-comments"></i> 在线客服: 右下角聊天图标</p>
                        </div>

                        <div class="contact-form">
                            <div class="form-group">
                                <label for="issue-type">问题类型</label>
                                <select id="issue-type">
                                    <option value="">请选择问题类型</option>
                                    <option value="connection">设备连接问题</option>
                                    <option value="data">数据异常</option>
                                    <option value="control">控制失效</option>
                                    <option value="other">其他问题</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="description">问题描述</label>
                                <textarea id="description" placeholder="请详细描述您遇到的问题..."></textarea>
                            </div>
                            <button class="submit-btn">提交支持请求</button>
                        </div>
                    </div>
                </div>

                <h3 style="margin: 30px 0 20px; color: #2c3e50;"><i class="fas fa-heartbeat"></i> 系统状态监控</h3>
                <div class="system-status">
                    <div class="status-card ok">
                        <i class="fas fa-server"></i>
                        <h4>API 服务</h4>
                        <p>运行正常</p>
                        <p>响应时间: 42ms</p>
                    </div>
                    <div class="status-card ok">
                        <i class="fas fa-database"></i>
                        <h4>数据库</h4>
                        <p>运行正常</p>
                        <p>存储使用: 65%</p>
                    </div>
                    <div class="status-card warning">
                        <i class="fas fa-network-wired"></i>
                        <h4>设备连接</h4>
                        <p>2个设备离线</p>
                        <p>在线率: 96%</p>
                    </div>
                    <div class="status-card ok">
                        <i class="fas fa-cloud"></i>
                        <h4>云服务</h4>
                        <p>运行正常</p>
                        <p>延迟: 28ms</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 菜单交互功能
        document.querySelectorAll('.menu-item > a').forEach(item => {
            // 为有子菜单的项添加箭头
            if (item.parentElement.querySelector('.submenu')) {
                const arrow = document.createElement('span');
                arrow.className = 'arrow';
                arrow.innerHTML = '<i class="fas fa-chevron-right"></i>';
                item.appendChild(arrow);

                // 主菜单项点击事件 - 只展开子菜单，不跳转
                item.addEventListener('click', function(e) {
                    e.preventDefault();

                    // 关闭其他菜单项
                    document.querySelectorAll('.menu-item').forEach(i => {
                        if (i !== this.parentElement) {
                            i.classList.remove('active');
                        }
                    });

                    // 切换当前菜单项
                    this.parentElement.classList.toggle('active');
                });
            } else {
                // 没有子菜单的项，添加点击事件处理跳转
                item.addEventListener('click', function(e) {
                    const route = this.getAttribute('onclick').match(/navigateTo\('(.*?)'\)/)[1];
                    if(route === 'showSupportPage') {
                        showSupportPage();
                    } else {
                        navigateTo(route);
                    }
                });
            }
        });

        // FAQ交互
        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('click', function() {
                this.parentElement.classList.toggle('active');
            });
        });

        // 导航功能
        function navigateTo(route) {
            console.log('导航到: ' + route);
            // 实际应用中这里会有页面跳转逻辑
            alert(`即将跳转到: ${route} 页面`);
            // 更新菜单激活状态
            updateMenuActiveState(route);
        }

        // 显示维护支持页面
        function showSupportPage() {
            // 显示维护支持内容，隐藏控制面板
            document.getElementById('dashboard-content').style.display = 'none';
            document.getElementById('support-content').style.display = 'block';
            document.querySelector('.header h2').textContent = '维护支持中心';
            updateMenuActiveState('wh');
        }

        // 更新菜单激活状态
        function updateMenuActiveState(route) {
            const menuItems = document.querySelectorAll('.menu-item');

            menuItems.forEach(item => {
                item.classList.remove('active');

                // 根据路由匹配对应的菜单项
                const menuText = item.querySelector('a span').textContent.trim();

                if (route === 'wh' && menuText === '维护支持') {
                    item.classList.add('active');
                } else if (route === 'dashboard' && menuText === '实时监控') {
                    item.classList.add('active');
                } else if (route === 'route_control' && menuText === '设备控制') {
                    item.classList.add('active');
                } else if (route === 'analyse' && menuText === '数据分析') {
                    item.classList.add('active');
                } else if (route === 'weather' && menuText === '每日天气') {
                    item.classList.add('active');
                } else if (route === 'ai_command' && menuText === 'AI自动化') {
                    item.classList.add('active');
                }
            });
        }

        // 退出登录
        const logoutBtn = document.getElementById('logout-btn');
        logoutBtn.addEventListener('click', function() {
            if (confirm('确定要退出登录吗？')) {
                localStorage.removeItem('user_id');
                fetch('/api/logout', {
                    method: 'POST',
                    credentials: 'include'
                })
                .then(() => {
                    window.location.href = '/';
                })
                .catch(error => {
                    console.error('退出登录失败:', error);
                });
            }
        });

        // 支持请求提交
        document.querySelector('.submit-btn').addEventListener('click', function() {
            const issueType = document.getElementById('issue-type').value;
            const description = document.getElementById('description').value;

            if (!issueType) {
                alert('请选择问题类型');
                return;
            }

            if (!description) {
                alert('请描述您遇到的问题');
                return;
            }

            alert('支持请求已提交！我们的团队会尽快与您联系。');
            document.getElementById('issue-type').value = '';
            document.getElementById('description').value = '';
        });

        // 初始化：默认显示控制面板
        updateMenuActiveState('dashboard');
    </script>
</body>
</html>